<template>
  <el-table
    class="flex-sub"
    :data="dataSource"
    :stripe="stripe"
    :border="border"
    v-loading="loading"
    v-bind="{ ...tableProps }"
    @selection-change="onHandleSelect"
    @select-all="onHandleSelectAll"
    @row-click="onHandleRowClick" 
  >
    <el-table-column
      v-for="item in columns"
      :key="item.key"
      :align="item.align || 'center'"
      :prop="item.key"
      :label="item.title"
      :fixed="item.fixed"
      :type="item.type"
      :width="item.width"
      :minWidth="item.minWidth"
      v-bind="{ ...extraProps }"
    >
      <template v-if="item.slot" v-slot="{ row, $index }">
        <slot :name="item.slot" :row="row" :index="$index"></slot>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="isShowPage"
    class="padding-top justify-end"
    small
    background
    :page-size="pageSize"
    :current-page="current"
    :total="total"
    :page-sizes="[10, 20, 30, 40, 50]"
    layout="prev, sizes, pager, next, jumper, total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /> 
</template>
<script lang='ts' setup>

import { DataType, ColumnsType, UserTabkeExtraProps } from "./tableTypes";

const $emits = defineEmits([
  "handleSelection",
  "handleSelectionAll",
  "onPageChange",
  "handleRowClick"
]);

const props = defineProps({
  stripe: {
    //斑马线
    type: Boolean,
    default: true,
  },
  border: {
    //边框
    type: Boolean,
    default: true,
  },
  dataSource: {
    //数据
    required: true,
    type: Array as PropType<Array<DataType>>,
    default: () => [] as Array<DataType>
  },
  columns: {
    //表头
    required: true,
    type: Array as PropType<Array<ColumnsType>>,
    default: () => [] as Array<ColumnsType>
  },
  extraProps: {
    //其他额外的一些参数
    type: Object as PropType<UserTabkeExtraProps>,
    default: () => {},
  },
  isShowPage: {
    //是否显示分页
    type: Boolean,
    default: true,
  },
  total: {
    //总数据
    type: [Number, String],
    default: 0,
  },
  tableProps: {
    //表格的一切其他参数
    type: Object,
    default: {
      maxHeight: "75vh"
    },
  },
  loading: {
    //loading动画
    type: Boolean,
    default: false,
  },
});

// 用户选中的数据
let selectedRows = reactive({
  rows: [] as DataType[]
})
// 用户勾选checkbox
const onHandleSelect = (selection: DataType[], row: DataType) => {
  selectedRows.rows = selection;
  $emits("handleSelection", selection);
};

// 全选
const onHandleSelectAll = (selection: DataType[]) => {
  selectedRows.rows = selection;
  $emits("handleSelectionAll", selection);
};

// 每一行选中
const onHandleRowClick = (row: DataType) => {
  $emits("handleRowClick", row);
}

/**
 * 获取选中集合
 * @returns {Array|*}
 */
const getSelectRows = () => {
  return selectedRows.rows;
};

// 每页显示多少条数据
const pageSize = ref(10);
// 当前第几页
const current = ref(1);
/**
 * 设置pageSize
 * @param pageSize
 */
const setPageSize = (size: number) => {
  pageSize.value = size;
};

/**
 * 设置current
 * @param current
 */
const setCurrentPage = (page: number) => {
  current.value = page;
};

// 每页显示条数
const handleSizeChange = (size: number) => {
  current.value = 1;
  pageSize.value = size;
  notifyPageChange(current.value);
};

/**
 * 页面改变回调（顺带清空多选集合）
 * @param page
 */
const notifyPageChange = (page: number) => {
  $emits("onPageChange", page);
  selectedRows.rows = [];
};

// 当前页数
const handleCurrentChange = (curr: number) => {
  current.value = curr;
  notifyPageChange(curr);
};

defineExpose({
  pageSize,
  current,
  getSelectRows,
  setPageSize,
  setCurrentPage,
});
</script>

<style lang="scss">
.el-table .el-table__header thead {
  color: #333;
}

.el-table .el-table__header thead tr th {
  background: #fbfbfb !important;
}
</style>